import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/Addons.js";

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  //摄像机调整
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  renderer.setSize(sizes.width, sizes.height);
});

//场景
const scene = new THREE.Scene();

//创建群组
const group = new THREE.Group();
scene.add(group);

const geometry = new THREE.BufferGeometry();
const positionArray = new Float32Array([0, 0, 0, 0, 1, 0, 1, 0, 0]);
//第一个顶点
// positionArray[0] = 0;
// positionArray[1] = 0;
// positionArray[2] = 0;

// positionArray[3] = 0;
// positionArray[4] = 1;
// positionArray[5] = 0;

// positionArray[6] = 1;
// positionArray[7] = 0;
// positionArray[8] = 0;

const positionAttr = new THREE.BufferAttribute(positionArray, 3);

//设置位置属性
geometry.setAttribute("position", positionAttr);

const cube = new THREE.Mesh(
  geometry,
  new THREE.MeshBasicMaterial({ color: "blue" })
);

group.add(cube);

//将立方体加入群组
const cube1 = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({
    color: "#ffaaaa",
    //开启线框
    wireframe: true,
  })
);
cube1.position.x = 2;
group.add(cube1);

//摄像机
const camera = new THREE.PerspectiveCamera(55, sizes.width / sizes.height);
camera.position.z = 3;
scene.add(camera);

//渲染器材
const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
renderer.domElement.setAttribute("class", "my-canvas");
document.body.appendChild(renderer.domElement);

//控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const change = () => {
  controls.update();

  renderer.render(scene, camera);
  window.requestAnimationFrame(change);
};

change();
